<template>
  <h1>循环指令</h1>
  <ul>
    <!-- 循环遍历arr数组，uname 就是本轮循环遍历到的元素   -->
    <li v-for="uname in arr ">{{ uname }}</li>
  </ul>
  <ol>
    <!-- 从1开始遍历 一直到数字5 固定写法 步长为1(++) 结束数字5可以自定义-->
    <li v-for="item in 5">{{ item }}</li>
  </ol>

  <table border="1px">
    <caption>商品列表</caption>
    <thead>
    <tr>
      <th>序号</th>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>操作</th>
    </tr>
    </thead>

    <tbody>
      <tr v-for="(item,index) in productArr">
        <td>{{ index + 1 }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.num }}</td>
        <td><button @click = "del(index)">删除</button></td>
      </tr>
    </tbody>

  </table>
</template>

<script setup>

import {ref} from "vue";

const arr = ref(['张三', '李四', '王五', '赵六', '钱七'])
const productArr = ref(
    [
      {title: '小米', price: 1000, num: 100},
      {title: '华为', price: 2000, num: 1000},
      {title: '苹果', price: 3000, num: 188},
      {title: '锤子', price: 4000, num: 10000},
      {title: 'oppo', price: 5000, num: 1000},
    ]
)

const del = (index)=>{
  if (confirm("您确定要删除此条数据吗？")){
    productArr.value.splice(index,1);
  }
}
</script>

<style scoped>

</style>